<template>
    <div v-loading="loading">
        <el-form ref="form" :disabled="view" :model="form" :rules="rules" label-width="160px" label-suffix="：">
            <el-row>
                <el-col :md="20">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title" placeholder="请输入标题" />
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input v-model="form.description" placeholder="请填写描述" />
                    </el-form-item>
                    <el-form-item label="跳转" prop="type">
                        <el-select ref="valueId" v-model="form.jump_type">
                            <el-option label="无跳转" :value="1" />
                            <el-option label="站内直播" :value="2" />
                            <el-option label="站内商品" :value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.jump_type === 3" label="绑定商品" prop="jump_value">
                        <el-button class="mb-10" icon="el-icon-plus" @click="goodsSelectVisible2 = true">{{ form.jump_value ? '重新选择' : '选择商品' }}</el-button>
                        <el-table ref="multipleTable" row-key="id" border :data="goodsArr" tooltip-effect="dark">
                            <el-table-column prop="id" label="ID" width="60" />
                            <el-table-column prop="number" label="编码" width="150" />
                            <el-table-column prop="title" label="商品" show-overflow-tooltip />
                            <el-table-column prop="business_classify" label="分类" />
                            <el-table-column prop="sale_price" label="销售价" />
                            <el-table-column prop="shop.name" label="店铺" />
                        </el-table>
                    </el-form-item>
                    <el-form-item v-if="form.jump_type === 2" label="请输入直播间ID" prop="jump_value">
                        <el-input v-model="form.jump_value" onkeyup="value=value.replace(/[^\d]/g,0)" class="liveID" />
                    </el-form-item>
                    <el-form-item label="封面" prop="image">
                        <image-upload :url.sync="form.image" tip="建议尺寸：750x346像素，且图片大小不超过 2MB" :width="187" :height="86.5" />
                    </el-form-item>
                    <el-form-item label="权重" prop="weigh">
                        <el-input-number v-model="form.weigh" :step="1" :min="0" step-strictly label="权重" />
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <goodsSelect v-model="goodsSelectVisible2" :multiple="false" @select="handleGoodsSelect" />
    </div>
</template>

<script>
import goodsSelect from '@/components/GoodsSelect/index.vue'
export default {
    components: {
        goodsSelect
    },
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            goodsSelectVisible2: false,
            goodsArr: [],
            loading: false,
            categoryOptions: [],
            form: {
                id: this.id,
                description: '',
                image: '',
                jump_type: 1,
                jump_value: '',
                status: 0,
                title: '',
                weigh: 0,
                product: {
                    business_classify: '',
                    id: '',
                    number: '',
                    sale_price: '',
                    shop: {
                        name: ''
                    },
                    title: ''
                }
            },
            rules: {
                title: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                image: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                jump_value: [{ required: true, message: '请完善信息', trigger: 'blur' }]
            }
        }
    },
    mounted() {
        // 编辑
        if (this.form.id != '') {
            this.getInfo()
        }
    },
    methods: {
        jump() {},
        handleGoodsSelect(row) {
            this.goodsArr = [row]
            this.form.jump_value = row.id
        },
        getInfo() {
            this.loading = true
            this.$api
                .post('banner/banner/detail', { id: this.form.id })
                .then(res => {
                    this.loading = false
                    const data = res.data.data
                    this.form = Object.assign(this.form, data)
                    this.goodsArr.push(this.form.product)
                    console.log(this.goodsArr)
                })
                .catch(() => {})
        },
        submit(callback) {
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        const params = this.form
                        this.$api.post('banner/banner/create', params).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            this.form.jump_type = 0
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        const params = this.form
                        this.$api.post('banner/banner/update', params).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            console.log(this.form.jump_value)
                            callback && callback()
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .box {
        display: flex;
    }
    .goods-info {
        display: flex;
        padding: 5px;
        border: 1px dashed #ececec;
        background-color: #fff;
        border-radius: 4px;
    }
    .goods-info-main {
        flex: 1;
    }
    .goods-title {
        margin-bottom: 3px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .liveID {
        width: 217px;
    }
</style>
